<template>
  <p>{{name}}</p>
</template>

<script>

import { reactive, toRefs } from 'vue'

export default {
  name: 'App',
  setup (props, context) {

    
    // const person = {
    //   name: 'liuxin',
    //   age: 18
    // }

    // let personCopy = reactive(person)

    // setTimeout(() => {
    //   personCopy.name = 'Jack'
    // }, 2000);

    // // 解构出的name不是响应式的
    // const { name } = personCopy

    // return {
    //   name
    // }

    

    const person = {
      name: 'liuxin',
      age: 18
    }

    let personCopy = reactive(person)

    setTimeout(() => {
      personCopy.name = 'Jack'
    }, 2000);

    // 解构出的name不是响应式的
    const { name } = toRefs(personCopy)

    return {
      name
    }


  }
}
</script>

<style>

</style>
